import React, { PureComponent } from 'react'
import Home from './Home'
import ProductList from './ProductList'
import SideBar from './SideBar'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      message: 'Hello World!',
      count: 100
    }
  }
  // // shouldComponentUpdate(newProps, newState) : 该生命周期函数在调用render函数前执行，
  // // 能拿到两个值，即将要修改的newProps，newState值
  // shouldComponentUpdate(newProps,newState) {
  //   // 当message原有值不等于 新设置的值时，才可以调用render函数 否则不可以
  //   if (this.state.message !== newState.message || this.state.count !== newState.count) {
  //     return true
  //   } else {
  //     return false
  //   }
  // }

  changeMsg() {
    this.setState({
      message: '你好 世界!'
    })
  }
  increment() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    const { message, count } = this.state
    console.log('App render');
    return (
      <div>
        <h2>message: {message} - count: {count}</h2>
        <button onClick={e => this.changeMsg()}>change msg</button>
        <button onClick={e => this.increment()}>count +1</button>

        <Home message={message} />
        <ProductList count={count} />
        <SideBar message={message} />
      </div>
    )
  }
}

export default App